<template>
    <div class="carouselBox" :class="{'noImg':!maxHeight}"  draggable="false" :style='`background:url(${options.bgUrl}) 0% 0% / cover no-repeat;padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px`'>
        <div class="swiper-container" :class="routerClass" v-if='showSwiper'>
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in options.imgList" :key='index' :style='`transform:scale(${options.imgPercent})`'>
                    <img :src="item.imageUrl" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
        <div class="box_shadow" v-if='!options.bgUrl && !maxHeight'>
            <div class="react_box"></div>
                <p>请在右侧添加图片</p>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css';
export default {
    data(){
        return {
            options:{
               
            },
            time:0,
            showAll:true,
            imgListLength:0,
            maxHeight:0,
            showSwiper:false,
            routerClass:'',
            isHaveImg:false,
            Swiper:null,
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.Swiper = null;
            this.showSwiper = false;
            this.showAll = false;
            this.maxHeight=0;
            if(val.imgList.length){
                val.imgList.map((vals,index)=>{
                    if(vals.naturalHeight>this.maxHeight){
                        this.maxHeight = vals.naturalHeight
                    }
                })
            }
            this.routerClass = 'swiper'+this.option.id;
            this.$nextTick(()=>{
                this.options =JSON.parse(JSON.stringify(val));
                this.imgListLength = this.options.imgList.length;
                // this.time = val.time*1000 
                this.showAll = true; 
                this.showSwiper = true;
                let that = this;
                setTimeout(()=>{
                    that.Swiper = new Swiper(`.${that.routerClass}`, {
                        // slidesPerView:3,
                        // spaceBetween: val.imgMargin/4,
                        slidesPerView: "auto",
                        centeredSlides : true,
                        loop: true,
                        // autoplay: val.time ? {
                        //     delay: val.time*1000,
                        //     disableOnInteraction: false,
                        // }:false,
                    })
                },0)
            })
        }
    },
    mounted(){
        this.showAll = false;
        this.maxHeight=0;
        this.showSwiper = false;
        if(this.option.imgList.length){
            this.option.imgList.map((vals,index)=>{
                if(vals.naturalHeight>this.maxHeight){
                    this.maxHeight = vals.naturalHeight
                }
            })
        }
        this.routerClass = 'swiper'+this.option.id;
        let that  = this;
        this.$nextTick(()=>{
            this.options =JSON.parse(JSON.stringify(this.option));
            this.imgListLength = this.options.imgList.length;
            this.time = this.options.time*1000 
            this.showAll = true; 
            this.showSwiper = true;
            setTimeout(()=>{
                that.Swiper = new Swiper(`.${that.routerClass}`, {
                    // slidesPerView:3,
                    // spaceBetween: this.options.imgMargin/4,
                    slidesPerView: "auto",
                    centeredSlides : true,
                    loop: true,
                    // autoplay: that.options.time ? {
                    //     delay: that.time,
                    //     disableOnInteraction: false,
                    // }:false,
                })
            },0)
        })
       
    }
}
</script>
<style scoped lang='less'>
.noImg{
    min-height: 200px;
    overflow: hidden;
}
.bgImg{
    position:absolute;
    top:0;
    left:0;
    z-index: 1;
    width:100%;
}
.swiper-container {
      width: 100%;
      height: 100%;
      position:relative;
      z-index: 2;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        width:220px !important ;
        height:auto;
    /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
    //   transform: scale(0.8);
      img{
          width:100%;
          height:auto;
          display: block;
      }
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1) !important;
	}

.carouselBox{
    width:100%;
    height:auto;
    position:relative; 
    background:#F8F3F0;
    .box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:70px;
            height:56px;
            background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
            background-size:cover;
            // background-color:#FFE3D5;
            margin-bottom:19px;
        }
    }
}
.el-carousel{
    overflow: hidden;
    width:100%;
    height:100%;
    img{
        width:100%;
    }
}
.box_shadow{
    position:absolute;
    width:100%;
    height:100%;
    z-index: 200;
    top:0;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    color:#918985;
    .react_box{
        width:70px;
        height:56px;
        margin-bottom:19px;
        background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
        background-size:cover;
    }
}
.circle{
   /deep/.el-carousel__button{
        border-radius:20px;
    } 
}
/deep/.el-carousel__button{
    width: 8px;
    height:8px;
    background-color:#999999;
    opacity:0.3;
}
/deep/.el-carousel__container{
    height:100%;
}
/deep/.el-carousel__indicators--outside{
    bottom:0;
    position:absolute;
}
.box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:70px;
            height:56px;
            margin-bottom:19px;
            background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
            background-size:cover;
        }
    }
</style>